<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>生命周期(新)</title>
  </head>

  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/17.0.1/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

    <script type="text/babel">
    /* 
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
								1.	constructor()
								2.	getDerivedStateFromProps 
								3.	render()
								4.	componentDidMount() =====> 常用
											一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
				2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
								1.	getDerivedStateFromProps
								2.	shouldComponentUpdate()
								3.	render()
								4.	getSnapshotBeforeUpdate
								5.	componentDidUpdate()
				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
								1.	componentWillUnmount()  =====> 常用
											一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
		*/

      class Count extends React.Component {
        constructor(props) {
          console.log("Count-constructor");
          super(props);
          this.state = { count: 0 };
        }

        add = () => {
          this.setState({ count: this.state.count + 1 });
        };

        death = () => {
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        };

        //强制更新
        force = () => {
          this.forceUpdate();
        };

        //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
        static getDerivedStateFromProps(prosp,state){
          console.log('getDerivedStateProps',prosp,state)
          return null
        }

        //更新之前获取快照
        getSnapshotBeforeUpdate(){
          console.log('getSnapshotBeforeUpdate')
          return 'atguigu'
        }

        //组件挂载完毕
        componentDidMount() {
          console.log("组件挂载完毕-componentDidMount");
        }

        //组件是否更新
        shouldComponentUpdate() {
          console.log("组件是否更新-shouldComponentUpdate");
          return true;
        }

        //组件更新完毕
        componentDidUpdate(preProps,preState,snapshotValue) {
          console.log("组件更新完毕-componentDidUpdate",preProps,preState,snapshotValue);
        }

        //组件将要卸载
        componentWillUnmount() {
          console.log("组件将要卸载-componentWillUnmount");
        }

        render() {
          console.log("Count-render");
          return (
            <div>
              <h2>当前求和为: {this.state.count}</h2>
              <button onClick={this.add}>加一</button>
              <button onClick={this.death}>卸载</button>
              <button onClick={this.force}>强制更新</button>
            </div>
          );
        }
      }

      ReactDOM.render(<Count count={100} />, document.getElementById("test"));
    </script>
  </body>
</html>
